<template>
<div id="mine" v-if="userInfo.token">
    <van-nav-bar
        title="我的"
        :fixed="true"
        :border="false"
    />

    <van-cell-group style="margin-top: 2.6rem">
        <van-cell
                style="background-color: #3bba63; color: #fff"
                :center="true"
                is-link>
            <template slot="title">
               <div class="personMsg">
                   <img src="./images/yjh.png" alt="">
                   <div class="personInfo">
                       <span>撩课-叶建华</span>
                       <span>微信号：yjh9522</span>
                   </div>
               </div>
            </template>
        </van-cell>
    </van-cell-group>

    <van-cell-group style="margin-top: 0.1rem">
    <van-cell  icon="label" title="我的订单" value="查看所有的订单" is-link></van-cell>
        <van-grid>
            <van-grid-item
                    v-for="(order, index) in orderData"
                    :key="index"
                    :icon="order.icon"
                    :text="order.title"
            />
        </van-grid>
    </van-cell-group>

    <van-cell-group style="margin-top: 0.6rem">
        <van-cell  icon="gold-coin" title="我的优惠券" value="1张" is-link></van-cell>
        <van-cell  icon="todo-list" title="我的收货地址" value="" is-link></van-cell>
    </van-cell-group>

    <van-cell-group style="margin-top: 0.6rem">
        <van-cell  icon="phone" title="联系客服" value="客服时间 07:00-22:00" is-link></van-cell>
        <van-cell  icon="smile-comment" title="意见反馈" value="" is-link></van-cell>
    </van-cell-group>

    <van-cell-group style="margin-top: 0.6rem">
        <van-cell  icon="gift-card" title="小撩买菜" value="下载APP体验更佳" is-link></van-cell>
    </van-cell-group>
</div>

    <SelectLogin v-else/>
</template>

<script>
import SelectLogin from './../../views/login/SelectLogin'
import {mapState} from 'vuex'
export default {
  name: 'Mine',
  data(){
    return{
     orderData: [
    {icon: 'cart-circle-o', title: '待支付'},
    {icon: 'pending-payment', title: '待收货'},
    {icon: 'comment-o', title: '待评价'},
    {icon: 'after-sale', title: '售后/退款'},
     ]
    }
  },
  computed:{
    ...mapState(["userInfo"]),
  },
  components:{
    SelectLogin
  }
}
</script>

<style lang="less" scoped>
    #mine{
        width: 100%;
        height: 100%;
        background: #f5f5f5;
    }
    .van-nav-bar{
        background-color: #3bba63;
    }
    /deep/ .van-nav-bar__title{
        color: #fff;
        font-size: 1rem;
    }
    .personMsg{
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .personMsg>img{
        width: 4rem;
        height: 4rem;
        border-radius: 2rem;
        border: 0.12rem solid #fff;
    }
    .personInfo{
        display: flex;
        flex-direction: column;
        margin-left: 0.8rem;
    }
    .van-cell__left-icon{
        color: orange;
        font-size: 1.2rem;
    }
</style>
